<template>
  <div class="release-container pt-4">
    <v-layout justify-start align-start>
      <v-flex md7>
        <v-layout justify-start align-center wrap px-5>
          <v-flex md12 d-flex align-center justify-space-between>
            <!-- 充值金额 -->
            <v-flex md4>
              <span
                class="subTitle title-color"
              >{{ $t('financial.topup') + $t('financial.amount') }} *</span>
            </v-flex>

            <v-flex md7>
              <v-text-field type="number" solo v-model="topup.amount"></v-text-field>
            </v-flex>
            <v-flex md1>RMB</v-flex>
          </v-flex>

            <!-- 充值方式 -->
          <!-- <v-flex md12 d-flex align-center justify-space-between>
            <v-flex md4>
              <span
                class="subTitle title-color"
              >{{ $t('financial.topup') + $t('financial.method') }} *</span>
            </v-flex>

            <v-flex md8>
              <v-radio-group v-model="topup.payType">
                <v-radio
                  v-for="(item, i) in payTypes"
                  :key="i"
                  :label="item.text"
                  :value="item.value"
                  color="primary"
                ></v-radio>
              </v-radio-group>
            </v-flex>
          </v-flex> -->

          <v-flex md12 my-2 d-flex align-center justify-space-between>
            <!-- 收款账户 -->
            <v-flex md4>
              <span class="subTitle title-color">{{ $t('financial.receiveAccount') }} *</span>
            </v-flex>

            <v-flex md8>
              <div class="title text-xs-left title-color">{{ receiveAccount }}</div>
            </v-flex>
          </v-flex>

          <v-flex md12 mt-2 d-flex align-center justify-space-between>
            <!-- 付款账号 -->
            <v-flex md4>
              <span class="subTitle title-color">{{ $t('financial.payAccount')}} *</span>
            </v-flex>

            <v-flex md8>
              <v-text-field solo v-model="topup.paymentNo"></v-text-field>
            </v-flex>
          </v-flex>

          <v-flex md12 mt-2 d-flex align-center justify-space-between>
            <!-- 交易流水号 -->
            <v-flex md4>
              <span class="subTitle title-color">{{ $t('financial.serialNumber')}}</span>
            </v-flex>

            <v-flex md8>
              <v-text-field solo v-model="topup.billNo"></v-text-field>
            </v-flex>
          </v-flex>

          <v-flex md12 mt-2 d-flex align-center justify-space-between>
            <!-- 充值时间 -->
            <v-flex md4>
              <span class="subTitle title-color">{{ $t('financial.topup') + $t('financial.time')}}</span>
            </v-flex>
            <v-flex md5>
              <v-menu offset-x full-width>
                <!-- <v-btn depressed slot="activator">
                <v-icon>date_range</v-icon>
                <span>选择起始日期</span>
                </v-btn>-->
                <v-text-field solo slot="activator" v-model="createDate" placeholder="请选择充值日期" disabled></v-text-field>
                <v-date-picker
                  landscape
                  min="2019-07-01"
                  :max="currentDate"
                  :first-day-of-week="0"
                  locale="zh-cn"
                  v-model="createDate"
                  color="secondary"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex md3>
              <v-menu offset-x full-width>
              <v-text-field solo slot="activator" v-model="createTime" placeholder="请选择充值时间" disabled></v-text-field>
              <v-time-picker color="primary"  v-model="createTime" format="24hr" scrollable></v-time-picker>
              </v-menu>
            </v-flex>
          </v-flex>

          <v-flex md12 mt-4 d-flex align-center justify-center>
            <v-flex md4>
              <v-btn large round color="primary" @click="onSubmit">
                <span class="title">{{ $t('base.submit')}}</span>
              </v-btn>
            </v-flex>
            <v-flex md3>
              <v-btn large round class="title" dark color="dark" @click="onReset">
                <span>{{ $t('base.reset')}}</span>
              </v-btn>
            </v-flex>
          </v-flex>
        </v-layout>
      </v-flex>

      <v-flex md4>
        <!-- <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=707809581,1424410782&fm=26&gp=0.jpg" class="qrcode" alt=""> -->
        <!-- 支付宝 -->
        <!-- <img src="@/assets/images/alipay.jpg" alt="" class="qrcode" /> -->
        <!-- 微信 -->
        <img src="@/assets/images/wechatpay.jpg" alt="" class="qrcode" />
      </v-flex>
    </v-layout>
  </div>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Task, Bill } from "@/api";
import { KV } from '@/utils/type';
import { forEach } from 'lodash';
import { ProfitIncome } from '@/api/bean';
import Cookie from 'js-cookie';
declare const $Vue: Vue;


@Component({})
export default class ReleaseTask extends Vue {
  private payTypes: Array<KV> = [];

  private defaultTopup: any = {
    topupTime: "",
    billNo: '',
    createTime: '',
    payType: 1,
    paymentNo: '',
    amount: 0,
    exchangeRate: 7.3,
  };

  private receiveAccount: string = "帅帅跨境（**军）";

  private topup: any = {
    
  };

  private createDate: string = '';
  private createTime: string = '';

  private currentDate: string = "";

  private requiredFields: Array<string> = ['payType', 'amount'];

  protected mounted() {
    $Vue.$emit("title", { message: this.$t("base.topup").toString() });

    this.onReset();


    this.payTypes = [
      {
        text: this.$t("financial.alipay").toString(),
        value: 1
      },
      {
        text: this.$t("financial.wechatpay").toString(),
        value: 2
      }
    ];
  }

  private onSubmit() {
    console.log(this.createTime);
    
    if (this.validate()) {
      this.submitTopup();
    } else {
      let message = '请填写必填字段';
      if (this.topup.amount <= 0) {
        message = '充值金额需大于0';
      }
      $Vue.$emit("snackbar", {
        message,
      });
    }
  }

  private validate(): boolean {
    let pass = true;
    if (this.createDate === '' || this.createTime === '') {
      pass = false;
    }
    this.requiredFields.forEach((item: string) => {
      if (this.topup[item] === "") {
        pass = false;
      }
    });
    return pass;
  }

  private onReset() {
    this.topup = Object.assign({}, this.defaultTopup);
  }

  private async submitTopup() {
    const params: ProfitIncome = {
      incomeType: 1, // 1 充值
      userId: Number(Cookie.get("seller_userId")),
      amount: Number(this.topup.amount),
      createTime: new Date(this.createDate + ' ' +this.createTime + ':00'),
      billNo: this.topup.billNo,
      paymentNo: this.topup.paymentNo,
      payType: Number(this.topup.payType),
      exchangeRate: 7.3,
      currency: 'CNY',
    };
    
    const { data } = await Bill.saveBill.r(params);
    console.log("saveBill", data);
    $Vue.$emit("snackbar", {
      message: data.message
    });
    $Vue.$emit("balance");
    if (data.result === 0) {
      this.$router.push({
        path: 'MyBill',
      });
    } else {
    }
  }
}
</script>

<style lang="less" scoped>
.droppable {
  border-radius: 4px;
  height: 8rem;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
  .preview-image {
    height: 100%;
  }
  .upload-tip {
    margin: 1rem;
  }
  .cloud-icon {
    margin-top: 2rem;
  }

  .file-input {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
    top: 0;
    &:hover {
      cursor: pointer;
    }
  }
}
#preview {
  height: 18rem;
  border: 1px dashed #888;
  border-radius: 8px;
}

.qrcode {
  width: 18rem;
}
</style>


